<script setup>
import { ref, reactive } from 'vue'
import {
  Delete,
  Copy,
  BringToFront,
  SentToBack,
  Newlybuild,
  Clear
} from '@icon-park/vue-next'

const visible = ref(false)

const style = reactive({
  width: 0,
  height: 0,
  position: 'absolute',
  left: '0px',
  top: '0px'
})
let currentNode = null
let modeType = 'node'
const showContextmenu = (type, { node, x, y }) => {
  modeType = type
  currentNode = node
  style.left = `${x}px`
  style.top = `${y}px`
  visible.value = true
}
const emits = defineEmits(['select'])
const handleSelectContextmenu = (key) => {
  emits('select', {
    key,
    node: currentNode
  })
}

defineExpose({ showContextmenu })
</script>

<template>
  <div :style="style">
    <a-dropdown
      class="graph-contextmenu"
      v-model:popup-visible="visible"
      :render-to-body="false"
      align-point
      @select="handleSelectContextmenu"
    >
      <span></span>
      <template #content>
        <a-doption value="copy" v-if="modeType === 'node'">
          <template #icon>
            <copy theme="outline" />
          </template>
          <span>复制</span>
        </a-doption>
        <a-doption value="paste">
          <template #icon>
            <newlybuild theme="outline" />
          </template>
          <span>粘贴</span>
        </a-doption>
        <a-doption value="clear">
          <template #icon>
            <clear theme="outline" />
          </template>
          <span>清空画布</span>
        </a-doption>
        <a-doption value="del" v-if="modeType === 'node'">
          <template #icon>
            <delete theme="outline" />
          </template>
          <span>删除</span>
        </a-doption>
        <a-doption value="top" v-if="modeType === 'node'">
          <template #icon>
            <bring-to-front theme="outline" />
          </template>
          <span>置于顶层</span>
        </a-doption>
        <a-doption value="bottom" v-if="modeType === 'node'">
          <template #icon>
            <sent-to-back theme="outline" />
          </template>
          <span>置于底层</span>
        </a-doption>
      </template>
    </a-dropdown>
  </div>
</template>

<style lang="less">
.graph-contextmenu {
  .arco-dropdown-list-wrapper {
    max-width: 500px !important;
    max-height: 500px !important
  }
}
</style>
